<template>
    <el-container class="containerBox">
        <el-header>
            <el-col :span="4">
                <div class="grid-content bg-purple">
                    <img  src="../../../public/logo.png" alt="图标">
                </div>
            </el-col>
            <el-col :span="16">
                <div class="grid-content bg-purple">电商后台管理系统</div>
            </el-col>
            <el-col :span="4">
                <div class="grid-content bg-purple">
                    <el-button type="warning" @click.stop="loginOut">退出</el-button>
                </div>
            </el-col>
        </el-header>
        <el-container>
            <!--侧边栏导航菜单-->
            <el-aside width="200px">
                <el-row class="tac">
                    <el-col :span="24">

                        <el-menu
                                default-active="2"
                                class="el-menu-vertical-demo"
                                @open="handleOpen"
                                @close="handleClose"
                                :router="true"
                        >
                            <el-submenu :index="item1.path" v-for="item1 in menusList" :key="item1.id">
                                <template slot="title">
                                    <i class="el-icon-location"></i>
                                    <span>{{item1.authName}}</span>
                                </template>
                                <el-menu-item-group >
                                    <el-menu-item :index="item2.path" v-for="item2 in item1.children" class="item-li">
                                        <i class="el-icon-menu"> </i>
                                        {{item2.authName}}
                                    </el-menu-item>
                                </el-menu-item-group>
                            </el-submenu>



                        </el-menu>
                    </el-col>

                </el-row>
            </el-aside>
            <el-main>
                <router-view></router-view>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
    export default {
        name: "home",
        data(){
          return {
              menusList:[],
          }
        },
        methods: {
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
            //获取menus操作菜单列表
            getMenusList(){
                this.$myhttp({
                  url:'menus',
                  methods:'get'
              }).then((respon)=>{
                  let {data,meta}=respon.data;
                  this.menusList=data;
                  console.log(respon,'获取操作菜单列表成功');

              })
            },

            //退出登录
            loginOut(){
                localStorage.clear('token');
                this.$router.push({name:'login'})
            }
        },
        mounted(){
           //  var token=localStorage.getItem('token');
           //  if(!token){//判断是否已经登陆。如果没有token则无法登陆，提示没有登陆
           //      this.$message.error('您还没有登陆');
           //      this.$router.push({name:'login'})
           //  }
           // console.log(token)
            this.getMenusList();
        }
    }
</script>

<style scoped>

    .containerBox{
        height:100%
    }
    /*设置头部字体大小*/
    .grid-content{
        font-size:20px;
        font-weight:700;
        color:#fff
    }
    /*设置导航栏子目录右偏*/
    .item-li{
        padding-right:0;
        /*color:red;*/
        font-size:12px;
        text-align:left;
        padding-left:80px !important;
    }
    .el-header, .el-footer {
        background-color: #B3C0D1;
        color: #333;
        text-align: center;
        line-height: 60px;
    }

    .el-aside {
        background-color: #D3DCE6;
        color: #333;
        text-align: center;
        line-height: 200px;
    }

    .el-main {
        background-color: #E9EEF3;
        color: #333;
        text-align: center;
        line-height: 160px;
    }

    body > .el-container {
        margin-bottom: 40px;
    }

    .el-container:nth-child(5) .el-aside,
    .el-container:nth-child(6) .el-aside {
        line-height: 260px;
    }

    .el-container:nth-child(7) .el-aside {
        line-height: 320px;
    }
</style>
